<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">  <!--导入V-bind需要的约束-->
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">  <!--view层 模板-->
{{message}}  <!--数据回显-->
</div>
<div id="bind" style="border: 3px solid red">
    <!--V-bind指令的用法-->
    <span v-bind:title="message">鼠标悬停几秒钟可以查看此处动态绑定的信息！</span>

    <a v-bind:href="url"><h1>百度</h1></a>    <!--v-bind可以绑定任意属性，并与动态数据联系起来-->
    <a :href="url"><h1>百度</h1></a>     <!--v-bind的语法糖写法，可以省略v-bind，但是不可以省略冒号（：）-->
</div>
<script>
    var vm1 = new Vue({
        el: "#app", //该m与哪个元素绑定
        //Model:数据
        data:{
            message:"hello world! I am Vue!"
        }
    });
    var vm2 = new Vue({
        el: "#bind", //该m与哪个元素绑定
        //Model:数据
        data:{
            message:"hello world! I am Vue!",
            url: "https://www.baidu.com"
        }
    });
</script>
</body>
</html>